<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/form.css">
    <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        h1 {
            width: 1200px;
            height: 90px;
            margin: 0 auto;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

        }

        h1>a {
          font-size: 20px;
          position: absolute;
          top: 6%;
          transform: translateY(-50%);
          padding-top: 75px;
          right: 50px;
          color:red;
        }
    
        form {
          width: 500px;
          display: flex;
          flex-direction: column;
          padding: 20px;
          border: 3px solid pink;
          border-radius: 15px;
          margin: 30px auto;
          padding-top: 50px;
          position: relative;
        }
    
        form>label {
          height: 50px;
          font-size: 22px;
        }
    
        form>label>input {
          padding-left: 22px;
          font-size: 22px;
        }
    
        form>button {
          font-size: 22px;
        }
    
        form>span {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 10px;
          color: red;
          display: none;
        }
    
        form>span.active {
          display: block;
        }
      </style>
    </head>
    
    <body>
      <h1>
        <div class="header container">修改密码</div>
        <a href="./index.html">回到首页</a>
      </h1>
        <form id="rpwdForm">
        <span class="error">两次密码不一致</span>
        <label>
          原&nbsp;始&nbsp;&nbsp;密&nbsp;码： <input type="text" id="original_password" required>
        </label>
        <label>
          新&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="text" id="new_password" required>
        </label>
        <label>
            确认新密码：<input type="text" id="confirm" required>
          </label>
        <button>确认修改</button>
      </form>
    <p class="error" id="errorMessage"></p>
</div>
<script src="../js/rpwd.js"></script>

<script src="../lib/axios.min.js"></script>
<script src="../lib/http.js"></script>
<script>
    // document.addEventListener('DOMContentLoaded', function () {
    // var rpwdForm = document.getElementById('rpwdForm');
    // rpwdForm.addEventListener('submit', function (e) {
    //     e.preventDefault(); //阻止表单的默认提交行为
    //     var original_password = document.getElementById('original_password').value;
    //     var new_password = document.getElementById('new_password').value;
    //     var confirm = document.getElementById('confirm').value;

    //     if (new_password !== confirm) {
    //       alert('两次密码不一致，请重新输入');
    //       return;
    //     }
    //     alert('修改密码成功，已经注销登录状态，请重新登录！');
    //     window.location.href = 'views/login.html';
    //   });
    // });
    document.addEventListener('DOMContentLoaded', async function () {
            var rpwdForm = document.getElementById('rpwdForm');
            var currentUser = JSON.parse(localStorage.getItem('currentUser'));
            if (!currentUser ) {
                window.location.href = 'views/login.html';
                return;
            }

            rpwdForm.addEventListener('submit', async function (e) {
                e.preventDefault();

                // 使用querySelector获取表单元素
                var original_passwordInput = rpwdForm.querySelector('#original_password');
                var new_passwordInput = rpwdForm.querySelector('#new_password');
                var confirmInput = rpwdForm.querySelector('#confirm');

                // 检查表单元素是否获取成功
                if (!original_passwordInput ||!new_passwordInput ||!confirmInput) {
                    alert('表单元素获取失败，请刷新页面重试');
                    return;
                }

                var original_password = original_passwordInput.value;
                var new_password = new_passwordInput.value;
                var confirm = confirmInput.value;

                if (new_password!== confirm) {
                    alert('两次密码不一致，请重新输入');
                    return;
                }


                console.log('currentUser.password:', currentUser.password);
                console.log('original_password:', original_password);
                // 先检查本地存储密码是否匹配
                if (currentUser.password!== original_password) {
                    alert('原始密码错误，请重新输入');
                    return;
                }

                try {
                    // 发送修改密码请求到后端
                    let response = await http.post('/users/rpwd', {
                        id: currentUser.id,
                        new_password: new_password
                    });
                    if (response.data.code === 1) {
                        var now = new Date();
                        alert(`修改密码成功，时间：${now.toLocaleString()}。请定期修改密码以保障账户安全，已经注销登录状态，请重新登录！`);
                        // 清除本地存储信息
                        localStorage.removeItem('currentUser');
                        localStorage.removeItem('token');
                        localStorage.removeItem('id');
                        window.location.href = 'views/login.html';
                    } else {
                        alert('修改密码失败，请稍后重试');
                    }
                } catch (error) {
                    console.error('修改密码出错:', error);
                    alert('修改密码过程中出现错误，请检查网络或稍后重试');
                }
            });
        });
</script>

</body>
</html>
